<template>
  <div>
    <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      height="360px"
      width="330px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';

export default {
  data() {
    return {
      options: {}, // ECharts 的配置项
      intervalId: null, // 定时器ID
      preSelectMapIndex: 0, // 上一次选中的索引
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.updateChartOptions(newData);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    updateChartOptions(data) {
      // 生成柱状图的配置
      this.options = {
        title: {
          text: '柱状图示例',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => item.name), // X轴数据
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '数据',
            type: 'bar',
            data: data.map((item) => item.value), // Y轴数据
            itemStyle: {
              color: '#5470C6',
            },
          },
        ],
      };
    },
    startInterval() {
      const _self = this;
      const time = 2000; // 定时器时间间隔
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectBarRandomIndex();
      }, time);
    },
    reSelectBarRandomIndex() {
      const length = this.cdata.length;
      this.$nextTick(() => {
        try {
          const chart = this.$refs.centreLeft2ChartRef.chart;
          let index = Math.floor(Math.random() * length);
          while (index === this.preSelectMapIndex || index >= length) {
            index = Math.floor(Math.random() * length);
          }
          chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
          console.log(error);
        }
      });
    },
    handleBarRandomSelect() {
      this.$nextTick(() => {
        try {
          const chart = this.$refs.centreLeft2ChartRef.chart;
          const _self = this;
          setTimeout(() => {
            _self.reSelectBarRandomIndex();
          }, 0);
          // 鼠标移入柱状图，取消定时器并高亮当前柱状图
          chart.on('mouseover', function (params) {
            clearInterval(_self.intervalId);
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            chart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // 鼠标移出柱状图，重新随机高亮并开启定时器
          chart.on('globalout', function () {
            _self.reSelectBarRandomIndex();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
          console.log(error);
        }
      });
    },
  },
  mounted() {
    this.handleBarRandomSelect();
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>